<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: xiaobai
 * @Date: 2021-06-11 08:55:00
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-15 11:01:53
 * @FilePath: /huizhou-official-website/src/views/contact_us/index.vue
-->
<template>
  <div>
    <div class="banner_boxa">
      <img :src="bannerUrl"
        class="banner_imga">
      <div
        class="bannenr_texta animation">
        <span>联系我们</span>
      </div>
    </div>
    <div class="contact_box">
      <div
        class="contact_row">
        <el-row :gutter="40">
          <el-col
            class="animate animate__animated animate__bounceInLeft "
            :md="12" :lg="12">
            <div
              id='container'>

              <baidu-map
                :center="center"
                :zoom="zoom"
                @ready="handler"
                style="height:350px"
                :scroll-wheel-zoom='true'>
              </baidu-map>
            </div>
          </el-col>
          <el-col
            class="animate animate__animated animate__bounceInRight "
            :md="12" :lg="12">
            <h2
              class="contact_title">
              联系我们</h2>
            <p>
              联系人：{{contact.name}}
            </p>
            <p>
              电话：{{contact.mobile}}
            </p>
            <p>
              邮箱：{{contact.email}}
            </p>
            <p>
              地址：{{contact.address}}
            </p>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import mapIcon from '../../assets/imgaes/dingwei.png'
export default {
  data() {
    return {
      bannerUrl: '',
      contact: {},
      center: { lng: 39.897445, lat: 116.331398 },
      zoom: 13
    }
  },
  mounted() {
    this.getBanner()
    this.getContact()
  },
  methods: {
    handler({ BMap, map }) {
      var point = new BMap.Point(116.331398, 39.897445)
      var icon = new BMap.Icon(mapIcon, new BMap.Size(30, 50))
      map.centerAndZoom(point, 20)
      var myGeo = new BMap.Geocoder()
      myGeo.getPoint(
        '广东省惠州市惠城区江北三环北路41号小区',
        function (point) {
          if (point) {
            map.centerAndZoom(point, 16)
            map.addOverlay(new BMap.Marker(point, { title: '广东省惠州市惠城区江北三环北路41号小区' }))
          }
        },
        '广东省'
      )
      var marker = new BMap.Marker(point, { icon: icon }) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
    },
    getBanner() {
      axios.post('/home/img', { projectId: this.$store.state.navList[6].id }).then(res => {
        const bannerList = res.data.data.imageList
        bannerList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
        this.bannerUrl = bannerList[0].imgUrl
      })
    },
    getContact() {
      axios.post('/home/contact/us', {}).then(res => {
        this.contact = res.data.data.contactUs
      })
    }
  }
}
</script>

<style>
</style>